<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">    
		<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  
		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
		<style type="text/css">
			.swiper-container {
			    width: 600px;
			    height: 300px;
			} 
			.swiper-container  img{
				width: 600px;
				height: 300px;
			}
			.swiper-container  .swiper-slide{
				width: 600px;
				height: 300px;
				text-align: center;
				line-height: 300px;
				background-color: #882525;
				color: #FFFFFF;
			}
			.test{
				background-color: #2C8DFB;
				height: 80px;
			}
			.swiper-pagination {
			  margin-left: -12px;
			}
			 .swiper-container{
			    --swiper-theme-color: #FFFFFF;
			    --swiper-pagination-color: #FFFFFF;/* 两种都可以 */
			  }
			  .swiper-scrollbar{
				/* color: #FFFFFF; */
				background-color: #FFFFFF;

/* transform: translateX(-50%); */
			  }
		</style>
	</head>
	<body>
		<div class="swiper-container" id="swiper1">
			 <div class="swiper-wrapper">
			    <div class="swiper-slide">
						<div>
							<h2>abc</h2>
						    <h2>abc</h2>
						</div>
				</div>
			    <div class="swiper-slide"><div>1</div></div>
			    <div class="swiper-slide">3</div>
				<div class="swiper-slide">4</div>
				<div class="swiper-slide">5</div>
				<div class="swiper-slide">6</div>
				<div class="swiper-slide">7</div>
				<div class="swiper-slide">8</div>
				<div class="swiper-slide">9</div>
			  </div>
			   <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
			   <div class="swiper-scrollbar"></div>
			</div>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	 window.onload=function(){
		 var mySwiper = new Swiper ('.swiper-container', {
		  autoplay: true,//可选选项，自动滑动
		  initialSlide :0,//初始化显示第n-1项
		  // direction : 'vertical',//切换方向
		  speed:2000,
		  setWrapperSize :true,//设置wrapper高度
		   loop : true,//循环轮播
          pagination: {
            el: '.swiper-pagination',
         },
		 scrollbar: {
		     el: '.swiper-scrollbar',
		 },
		  on:{
		       click: function(event){
		        console.log('click event',event)
			},
			init: function(swiper){
			      //Swiper初始化了
						   
			      console.log('当前的slide序号是'+this.activeIndex);//或者swiper.activeIndex，swiper与this都可指代当前swiper实例
			      //this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
			      
			}, 
			 autoplay:function(event){
			     //your code
				  console.log('autoplay',event)
				  console.log('当前的slide序号是'+this.activeIndex);
			  },
			}
		 

	 })        
	 mySwiper.scrollbar.$el.css('width','60%');
	 mySwiper.scrollbar.$el.css('left','50%');
	 mySwiper.scrollbar.$el.css('transform','translateX(-50%)');

		// new Swiper('.swiper-container')
		// var mySwiper = document.querySelector('.swiper-container').swiper
		// //切换方向vertical 纵向 horizontal横向
  //        mySwiper.changeDirection('vertical')
		// setInterval(function(){
		// 	console.log("slideNext")
		// 	mySwiper.slideNext();
		// },2000)
	}
	 
</script>